<template>
  <div class="task-result-icon">
    <svg
      v-if="s"
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.0899 0.847656C12.7833 0.283203 11.3927 0 10.0001 0C8.60752 0 7.21299 0.283203 5.9083 0.849609L1.25005 2.86523V8.61133C1.24619 9.91992 1.4708 11.2168 1.91026 12.4473C2.33604 13.6523 2.94736 14.7812 3.7208 15.7949C4.50205 16.8281 5.44541 17.7266 6.51182 18.457C7.57236 19.1816 8.75401 19.7051 9.99815 20C11.2403 19.7031 12.4181 19.1836 13.4747 18.4629C14.5411 17.7344 15.4845 16.834 16.2657 15.8008C17.045 14.7852 17.6603 13.6523 18.0899 12.4434C18.5294 11.2129 18.7521 9.91602 18.7501 8.60742V2.86523L14.0899 0.847656ZM14.8595 7.58984L12.7149 9.67969C12.6778 9.71484 12.6622 9.76758 12.67 9.81836L13.1759 12.7695C13.2208 13.0254 12.9513 13.2188 12.7228 13.0996L10.0724 11.707C10.0274 11.6836 9.97276 11.6836 9.92783 11.707L7.27744 13.0996C7.04893 13.2207 6.7794 13.0254 6.82432 12.7695L7.33018 9.81836C7.33799 9.76758 7.32236 9.7168 7.28525 9.67969L5.14072 7.58984C4.95518 7.4082 5.05674 7.09375 5.31455 7.05664L8.27744 6.62695C8.32822 6.61914 8.37315 6.58789 8.39463 6.54102L9.71885 3.85547C9.83408 3.62305 10.1642 3.62305 10.2794 3.85547L11.6036 6.54102C11.6271 6.58789 11.67 6.61914 11.7208 6.62695L14.6837 7.05664C14.9415 7.09375 15.045 7.4082 14.8595 7.58984Z"
        :fill="color"
      />
    </svg>
  </div>
</template>
<script>
export default {
  name: "TaskResultIcon",
  props: {
    s: String //r,g,b,y
  },
  data: () => {
    return {};
  },
  methods: {},
  computed: {
    //绿，蓝，黄，红
    color: function() {
      switch (this.s) {
        case "黄盾":
          return "#F7B13C";
        case "红盾":
          return "#dd1825";
        case "蓝盾":
          return "#0813dd";
        case "绿盾":
          return "#3C9418";
        default:
          return "#303244 ";
      }
    }
  },
  mounted: function() {}
};
</script>
<style lang="scss" scoped>
.card {
  background-color: #252735;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  .card-top {
    box-shadow: 5px 2px 12px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: #303244;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 16px;
      color: #fff;
    }
  }
  .card-content {
  }
}
</style>
